<template>
  <view class="container">
    <map style="width: 100%; height: 816rpx" :latitude="latitude" :longitude="longitude"></map>
    <image src="../../static/images/indexposition.png" style="width: 64rpx; height: 64rpx; position: fixed; top: 572rpx; right: 32rpx" mode=""></image>
    <!-- 打车时间计时 -->
    <view id="box" :style="{ height: boxheight + 'px' }" class="box">
      <!-- 司机图片 -->
      <image src="../../static/order/driver.png" style="width: 176rpx; height: 214rpx; position: absolute; top: -50rpx; right: 0" mode=""></image>

      <!-- 倒计时 -->
      <view>{{ time }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      boxheight: '',
      countdown: 0, //倒计时
      time: '',
      timer: null,
      latitude: 39.909,
      longitude: 116.39742,
      testMinute: 10,
      testSecond: 0
    };
  },
  methods: {
    // 倒计时
    countdownfn() {
      if (!!uni.getStorageInfoSync('time')) {
        console.log(11111);
        this.countdown = 600;
        console.log(this.countdown);
        let min = 0;
        let sec = 0;
        this.timer = setInterval(() => {
          this.countdown--;
          uni.setStorageSync('time', this.countdown);
          min = this.countdown / 60 > 0 ? parseInt(this.countdown / 60) : '0' + parseInt(this.countdown / 60);
          console.log('本地无', min, sec);
          sec = this.countdown % 60 > 0 ? this.countdown % 60 : '0' + (this.countdown % 60);
          this.time = min + ':' + sec;
        }, 1000);
      } else {
        this.countdown = uni.getStorageInfoSync('time');
        let min2 = 0;
        let sec2 = 0;
        this.timer = setInterval(() => {
          this.countdown--;
          uni.setStorageSync('time', this.countdown);
          min2 = this.countdown / 60 > 0 ? parseInt(this.countdown) : '0' + parseInt(this.countdown / 60);
          sec2 = this.countdown % 60 > 0 ? this.countdown % 60 : '0' + (this.countdown % 60);
          console.log('本地有', min2, sec2);
          this.time = min2 + ':' + sec2;
        }, 1000);
      }
    }
  },
  onLoad() {
    //倒计时
    this.countdownfn();
  },
  onShow() {
    // 获取剩余高度
    uni.getSystemInfo({
      success: (e) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#box')
          .boundingClientRect((data) => {
            this.boxheight = e.screenHeight - data.top;
            console.log('节点离页面顶部的距离为' + this.boxheight);
          })
          .exec();
      }
    });
  },
  onHide() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
  .box {
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 632rpx;
    background: linear-gradient(179deg, #c5ddff 0%, #ffffff 100%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
  }
}
</style>
